<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    
    重新认识下熟悉的浏览器 - 十
    
  </title>
  <meta name="description" content="">
  <link href="atom.xml" rel="alternate" title="十" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/foundation.min.css" />
  <link rel="stylesheet" href="asset/css/docs.css" />
  <script src="asset/js/vendor/modernizr.js"></script>
  <script src="asset/js/vendor/jquery.js"></script>
  <script src="asset/highlightjs/highlight.pack.js"></script>
  <link href="asset/highlightjs/styles/github.css" media="screen, projection" rel="stylesheet" type="text/css">
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</head>

<body class="antialiased hide-extras">
  <div class="marketing off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="top-bar docs-bar hide-for-small" data-topbar>
        <div id="header">
          <h3><a href="index.html">十的对称 十的完美</a></h1>
        </div>
      </nav>
      <nav class="tab-bar show-for-small">
        <a href="javascript:void(0)" class="left-off-canvas-toggle menu-icon">
          <span> &nbsp;</span>
        </a>
        <div id="header">
          <h3><a href="index.html">十的对称 十的完美</a></h1>
        </div>
      </nav>
      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><a href="index.html">关于我</a></li>
          
          <li class="divider"></li>
          <li><label>Angular</label></li>
          
          <li><a title="angular mock的使用" href="16073237309370.html">angular mock的使用</a></li>
          
          
          <li class="divider"></li>
          <li><label>JavaScript</label></li>
          
          <li><a title="重新认识下熟悉的浏览器" href="16076922632055.html">重新认识下熟悉的浏览器</a></li>
          
          
          <li class="divider"></li>
          <li><label>重学前端--学习笔记</label></li>
          
          <li><a title="javascript原型和原型链" href="16080322533005.html">javascript原型和原型链</a></li>
          
          
        </ul>
      </aside>
      <a class="exit-off-canvas" href="#"></a>
      <section id="main-content" role="main" class="scroll-container">
        <div class="row">
          <div class="large-9 medium-9 columns">
  <div class="markdown-body">
  <div class="markdown-inside">
    <h1>重新认识下熟悉的浏览器</h1>
    <time class="article-date" datetime="2020-12-11T21:11:03+08:00">发布于2020/12/11</time>
    <p>前端程序员每天都在抠代码，各种各样的技术，千变万化的框架，但最后组装压缩在一起，就是为了伺候操作系统的一个软件————浏览器。这一次，在阅读了三天各大博主的精华后，就chrome浏览器来做一下自己的整理记录。<br/>
双击桌面chrome浏览器发生了什么呢：</p>

<blockquote>
<p>系统创建了一个chrome的进程。</p>

<blockquote>
<p>从多标签页app的开始，一个chrome进程中有了多个子tab进程。</p>

<blockquote>
<p>每个tab进程内有下面这些进程：<br/>
<a href="#toc_0">渲染引擎</a><br/>
<a href="#toc_1">JS引擎</a><br/>
<a href="#toc_2">用户界面</a><br/>
<a href="#toc_3">存储</a></p>
</blockquote>
</blockquote>
</blockquote>

<h2 id="toc_0">渲染引擎</h2>

<p>最初渲染引擎和JS引擎并没有分家，在一起统称为浏览器内核，后来JS引擎越来越独立，内核就完全倾向于渲染引擎。chrome原来使用的就是webkit引擎，后来为了不受制于苹果，基于webkit改编了blink，将其内置于chrome中。</p>

<h2 id="toc_1">JS引擎</h2>

<h2 id="toc_2">用户界面</h2>

<h2 id="toc_3">存储</h2>

<h2 id="toc_4">感受</h2>

<p>现在对学习的感觉是即入迷又无力，学到这里的时候回想一下，我最开始只是看到了一篇短文，浅谈JS事件的原理，而当时的那篇文章真的是比较浅，我现在已经忘了内容是什么了，但是在我不断深入的时候，每每看到一个强大的人的博客的时候就会发现一些新内容，当我为了弄懂其中一个小名词的时候又会引出无数的子节点，真的是树无处不在，越来越入迷，也越来越吃力。虽然我不知道整个树有多大，但是当学到末梢节点的时候回头来总结一下，看看我捋顺的健壮的树枝，真的是振奋人心。</p>

<h2 id="toc_5">参考</h2>

<p><a href="https://segmentfault.com/a/1190000018806562">webkit引擎和v8引擎工作原理</a></p>

  </div>
</div>
<br /><br />
<hr />
<div class="row clearfix">
  <div class="large-6 columns">
    <div class="text-left" style="padding:15px 0px;">
      
      <a href="16080322533005.html" title="Previous Post: javascript原型和原型链">&laquo;
        javascript原型和原型链</a>
      
    </div>
  </div>
  <div class="large-6 columns">
    <div class="text-right" style="padding:15px 0px;">
      
      <a href="16073237309370.html" title="Next Post: angular mock的使用">angular mock的使用 &raquo;</a>
      
    </div>
  </div>
</div>
<div class="row">
  <div style="padding:0px 0.93em;" class="share-comments">
    
  </div>
</div>
<script type="text/javascript">
  $(function () {
    var currentURL = '16076922632055.html';
    $('#side-nav a').each(function () {
      if ($(this).attr('href') == currentURL) {
        $(this).parent().addClass('active');
      }
    });
  });
</script>  
          </div>
          <div class="large-3 medium-3 columns">
            <div class="hide-for-small">
              <div class="sidebar">
                <nav>
                  <ul id="side-nav" class="side-nav">
                    
                    <li class="side-title"><span>Angular</span></li>
                    
                    <li>
                      <a title="angular mock的使用" href="16073237309370.html">angular mock的使用</a>
                    </li>
                    
                    
                    <li class="side-title"><span>JavaScript</span></li>
                    
                    <li>
                      <a title="重新认识下熟悉的浏览器" href="16076922632055.html">重新认识下熟悉的浏览器</a>
                    </li>
                    
                    
                    <li class="side-title"><span>重学前端--学习笔记</span></li>
                    
                    <li>
                      <a title="javascript原型和原型链" href="16080322533005.html">javascript原型和原型链</a>
                    </li>
                    
                    
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
        <div class="page-bottom">
          <div class="row">
            <hr />
            <div class="small-9 columns">
              <p class="copyright">Contact Me&nbsp;
                Tel: +86 18641188786,&nbsp;
                mail: 416376663@qq.com</p>
            </div>
            <div class="small-3 columns">
              <p class="copyright text-right"><a href="#top">TOP</a></p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
  <script src="asset/js/foundation.min.js"></script>
  <script src="asset/js/foundation/foundation.offcanvas.js"></script>
  <script>
    $(document).foundation();
  </script>
  
  
  
</body>

</html>